@import "../styles/_base.less";
@import "../styles/_mixins.less";

.button-size(@padding; @font-size;) {
    padding: @padding;
    font-size: @font-size;
}

.btn-color(@color) {
    color: #fff !important;
    background: @color !important;
}

.btn-primary() {
    .btn-color(@primary-color);
}

.btn-ghost() {
    .btn-color(#fff);
    color: @text-color !important;
}

.i-btn{
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    white-space: nowrap;
    user-select: none;
    font-size: @size-font-base;
    border-radius: 2px;
    border: 0 !important;
    position: relative;
    text-decoration: none;

    height: @btn-circle-size;
    line-height: @btn-circle-size;

    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);

    .btn-color(@btn-default-bg);
    color: @text-color !important;

    margin: 10px;

    &-hover{
        opacity: 0.9;
    }

    &-long{
        border-radius: 0;
        margin: 0;
        box-shadow: none;
    }

    &-large {
        height: @btn-circle-size-large;
        line-height: @btn-circle-size-large;
    }

    &-small {
        height: @btn-circle-size-small;
        line-height: @btn-circle-size-small;
    }

    &-primary{
        .btn-primary;
    }

    &-ghost {
        .btn-ghost;
    }

    &-success {
        .btn-color(@success-color);
    }

    &-warning {
        .btn-color(@warning-color);
    }

    &-error {
        .btn-color(@error-color);
    }

    &-info {
        .btn-color(@info-color);
    }

    &-circle{
        border-radius: @btn-circle-size;
    }
    &-large&-circle{
        border-radius: @btn-circle-size-large;
    }
    &-small&-circle{
        border-radius: @btn-circle-size-small;
    }

    &-loading{
        opacity: 0.6;
    }

    &-loading-inner{
        display: inline-block;
        margin-right: 12px;
        vertical-align: middle;
        width: 14px;
        height: 14px;
        background: transparent;
        border-radius: 50%;
        border: 2px solid #fff;
        border-color: #fff #fff #fff transparent;
        animation: btn-spin 0.6s linear;
        animation-iteration-count: infinite;
    }

    &-disabled{
        color: @btn-disable-color !important;
        background: @btn-disable-bg !important;
    }

    &-inline{
        display: inline-block;
    }
}
@keyframes btn-spin {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}